<template>
  <div>
    <div class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <Button
            type="primary"
            @click="showCreate"
          >{{ $t("companyManagement.companyAdd") }}</Button>
        </div>
        <div class="title">{{ $t("companyManagement.companyTitle") }}</div>
      </div>
      <div class="glo-search-area">
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t("emailSetting.BodyTemAnimalTimeS")}}：</div>
          <DatePicker
            class="date-widget"
            v-model="selectDate"
            type="daterange"
            :placeholder="$t('emailSetting.BodyTemAnimalTimeScope')"
          />
        </div>
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t("companyManagement.companyName")}}：</div>
          <Input  v-model="searchName" :placeholder="$t('companyManagement.pleaseEnter')" />
        </div>
        <div class="date-filter widget-item">
          <div class="widget-label">{{$t("companyManagement.industry")}}：</div>
          <Input  v-model="searchIndustry" :placeholder="$t('companyManagement.pleaseEnter')" />
        </div>
        <div class="glo-clear-after" style="float:right">
          <i-button style="margin-top:36px" type="primary" @click="getData()">{{$t('emailSetting.Search')}}</i-button>
        </div>
      </div>
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
      />
      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <UserEdit
      v-if="ifCreate"
      @close="closeCreate"
      @updata="updata"
    />
    <UserEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
      @updata="updata"
    />
  </div>
</template>

<script>
import {
  getList,
  delOne,
} from '@/api/company.js'
import pageMixin from '@/utils/mixins/pageMixin.js'
import moment from 'moment'
import UserEdit from './UserEdit'
import UserListSettings from './UserListSettings'

export default {
  mixins: [
    pageMixin,
  ],
  components: {
    UserEdit,
  },
  computed: {
    btnShow () {
      return this.$store.state.btnShow
    },
  },
   watch: {
    btnShow(){
      this.columns = [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('companyManagement.companyName'),
          key: 'name',
        },
         {
          title: this.$t('companyManagement.administrator'),
          key: 'username',
        },
        {
          title: this.$t('companyManagement.industry'),
          key: 'industry',
        },
        {
          title: this.$t('companyManagement.registrationDate'),
          key: 'createDate',
        },
        
        {
          title: this.$t('versionIndex.verOperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(UserListSettings, {
              props: { row },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ]
      return this.$store.state.btnShow
    }
  },
  data () {
    
    return {
      total: 0,
      selectDate: [],
      searchName: '',
      searchIndustry: '',
      modal1: false,
      selection: [],
      page: 1,
      pageSize: 10,
      list: [],
      personName: '',
      columns: [
        { type: 'selection', width: 70 },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('companyManagement.companyName'),
          key: 'name',
        },
         {
          title: this.$t('companyManagement.administrator'),
          key: 'username',
        },
        {
          title: this.$t('companyManagement.industry'),
          key: 'industry',
        },
        {
          title: this.$t('companyManagement.registrationDate'),
          key: 'createDate',
        },
        {
          title: this.$t('companyManagement.operation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(UserListSettings, {
              props: { row },
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],

      ifCreate: false,
      ifUpdate: false,
      editItem: null,
    }
  },

  mounted () {
    this.getData()
    
  },

  methods: {
    
    async getData () {
      var startDate = ""
      var endDate = ""
      if (this.selectDate.length) {
        [startDate, endDate] = this.selectDate
        if (moment.isDate(startDate)) {
          startDate = moment(startDate).format('YYYY-MM-DD')
        }
        if (moment.isDate(endDate)) {
          endDate = moment(endDate).format('YYYY-MM-DD')
        }
      }
      const { success, data } = await getList({
        page: this.page,
        limit: this.pageSize,
        startDate: startDate,
        endDate: endDate,
        name:this.searchName,
        industry:this.searchIndustry,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        list = data.data
        page = data.pageNum || 1
        total = data.count
      }
      this.list = list
      this.page = page
      this.total = total
    },
    changeSize(e){
      this.pageSize=e;
      this.getData()
    },
    changePage(e){
      this.page=e
      this.getData()
    },
    showCreate () {
      // this.ifUpdate = false
      this.ifCreate = true
    },
    closeUpdate (ifUpdated) {
      // if(ifUpdated){
        // ifUpdated && this.$_page_update()
        this.ifUpdate = false
        // this.getData()
    },
    updata(){
      // console.log("觸發updata")
      this.getData()
    },
    closeCreate (ifUpdated) {
      // ifUpdated && this.$_page_update()
      this.ifCreate = false
      // this.getData()
    },
    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
      }
    },
    async handleDel (item) {
      this.$Modal.confirm({
        title: this.$t('companyManagement.companyDel'),
        content: this.$t('companyManagement.companyDelTip'),
        onOk: async () => {
          const { success } = await delOne(
            { id: item.id }
          )
          if (success) {
            this.$Message.success(this.$t('versionIndex.verDelBtnSucc'))
            this.getData()
          } else {
            this.$Message.error(this.$t('permissionsIndex.UserDelHint'))
          }
        },
      })
    },
    showUpdate (item) {
      this.ifUpdate = true
      this.editItem = item
    },
    
  },
}
</script>

<style lang="less" scoped>
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
